<template>
  <el-dialog
    title="选择设备"
    :visible.sync="dialogVisible"
    width="800px"
    @close="handleClose">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-row>
        <el-col :span="18">
          <el-form-item label="" prop="productId">
            <el-select v-model="queryParams.productId" style="width:300px" placeholder="全部产品">
              <el-option
                label="全部产品"
                value=""
              ></el-option>
              <el-option
                v-for="product in productOptions"
                :key="product.id"
                :label="product.name"
                :value="product.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item label="设备名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入设备名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="deviceList"
              highlight-current-row
              @current-change="onCurrentChange"
              @selection-change="handleSelectionChange">
      <el-table-column label="" align="center" prop="" width="50">
        <template slot-scope="scope">
          <!--          <i class="el-icon-success" v-if="selectDevice.id===scope.row.id"></i>-->
          <el-radio v-model="selectDevice.id" :label="scope.row.id"><span></span></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="设备编码" align="center" prop="code"/>
      <el-table-column label="设备名称" align="center" prop="name"/>
      <el-table-column label="所属产品" align="center" prop="productName"/>
      <el-table-column label="节点类型" align="center" prop="dictLabel"/>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>

</template>

<script>
  import {listDevice} from "@/api/device/device";
  import {selectProductList} from "@/api/biz/product";

  export default {
    props: {
      roomId: {
        type: Number
      },
      productId: {
        type: Number
      }
    },
    data() {
      return {
        dialogVisible: true,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],

        selectDevice: {},

        // 总条数
        total: 0,
        // 设备信息表格数据
        deviceList: [],
        // 机房数据
        roomOptions: [],
        // 产品数据
        productOptions: [],
        //网关设备
        deviceOptions: [],
        //产品对象
        product: {id: undefined, nodeType: undefined},

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roomId: undefined,
          productId: undefined,
          name: undefined,
          code: undefined,
        },
      };
    },
    created() {
      selectProductList().then(response => {
        this.productOptions = response.rows;
      });
      this.getList();
    },
    mounted() {
      if (this.roomId) {
        this.queryParams.roomId = this.roomId
        this.getList()
      }
      if (this.productId) {
        this.queryParams.productId = this.productId;
        this.getList();
      }
    },
    methods: {
      onCurrentChange(row) {
        this.selectDevice = row;
      },

      /** 查询设备信息列表 */
      getList() {
        this.loading = true;
        listDevice(this.queryParams).then(response => {
          this.deviceList = response.rows;
          this.total = response.total;
          this.loading = false;
        }).finally(() => {
          this.loading = false;
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
      },
      handleSubmit() {
        if (!this.selectDevice.id) {
          this.$message.warning('请选择设备');
          return false;
        }
        this.$emit('select', this.selectDevice)
      },
      handleClose() {
        this.$emit('close')
      }


    }
  };
</script>
